<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Music</title>
    <link href="css/bootstrap.min.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" />
    <link href="css/bootstrap-table.css" rel="stylesheet">
</head>

<body>
    <nav class="navbar navbar-default navbar-fixed-top" role="navigation">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#sidebar-collapse">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="#"><span>Web</span>Listen</a>
                <ul class="user-menu btn-lg">
                    <li class="dropdown pull-right">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown"><span class="glyphicon glyphicon-th"></span> <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="player.html"><span class="glyphicon glyphicon-headphones"></span>本地音乐</a></li>
                            <li><a href="search.html"><span class="glyphicon glyphicon-cloud"></span> 在线音乐</a></li>
                            <li><a href="add.html"><span class="glyphicon glyphicon-log-out"></span> 分享</a></li>
                        </ul>
                    </li>
                </ul>
            </div>
                            
        </div><!-- /.container-fluid -->
    </nav>              
        
  <div class="row">
            <div class="col-lg-12">
                <div class="panel panel-default">
                    <div class="panel-heading">
                      <h2>音乐列表</h2>
                      <!-- <div class="btn-group">
                      <button type="button" class="btn btn-default" onClick='player_onclick(1)'><span class='glyphicon glyphicon-pause'></span></button>
                      <button type="button" class="btn btn-default" onClick='player_onclick(0)'><span class='glyphicon glyphicon-stop'></span></button>
                      <button type="button" class="btn btn-default" onClick='player_onclick(2)'><span class='glyphicon glyphicon-play'></span></button>
                       </div> 
 -->                    </div>

                    <div class="panel-body">
                        <table data-toggle="table" data-url="cgi-bin/table.cgi"  data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-pagination="true" data-sort-name="id" data-sort-order="asc">
                            <thead>
                            <tr>
                               <th data-field="state" data-checkbox="true" ></th>
                               <th data-field="id" data-sortable="true">Id</th>
                                <th data-field="name"  data-sortable="true">歌曲</th>
                                <th data-field="player" data-sortable="true">演奏者</th>
                                <th data-field="path" data-sortable="true">路径</th>
                               <th data-field="button"  data-sortable="true"></th>
                            </tr>
                            </thead>
                        </table>
                    </div>
                </div>
            </div>
  </div>
    
 <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/chart.min.js"></script>
    <script src="js/chart-data.js"></script>
    <script src="js/easypiechart.js"></script>
    <script src="js/easypiechart-data.js"></script>
    <script src="js/bootstrap-table.js"></script>
    <script src="js/bootstrap-datetimepicker.js"></script>
    <script src="js/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
                $(window).load(function () {
  /*                      $.getJSON("cgi-bin/table.cgi", function (data) {
                             var tt = "";
                            $.each(data, function (k, v) {
                                $.each(v, function (kk, vv) {
                                    tt += kk + "：" + vv + "\n";
                                });
                            });
                            alert(tt);
                         });*/
                    });
	function my_onclick(id_count){
    $.post("cgi-bin/player.cgi",{id: id_count }, function (data) {
        var serverData = data.split(":");
       alert(data);
        if (serverData[0] == "OK")
        {
          // alert("OK");
           // window.location.href = serverData[1];
        }
        else {
           //alert("Error");
            //$("#error").show();
            //$("#error").hide(5000);
        }
    });
	}
  function player_onclick(com_count){
    $.post("cgi-bin/player.cgi",{com: com_count }, function (data) {
        var serverData = data.split(":");
       alert(data);
        if (serverData[0] == "OK")
        {
          // alert("OK");
           // window.location.href = serverData[1];
        }
        else {
           //alert("Error");
            //$("#error").show();
            //$("#error").hide(5000);
        }
    });
  }
  </script>
  </body>
</html>


